<template>
  <div class="icon-picker">
    <!-- 1. 下拉选择 -->
    <el-select
      v-model="innerValue"
      :placeholder="placeholder"
      :style="{ width: width + 'px' }"
      filterable
      clearable
    >
      <el-option v-for="opt in options" :key="opt.value" :value="opt.value">
        <template #default>
          <el-icon :size="size" style="vertical-align: middle; margin-right: 8px">
            <component :is="opt.icon" />
          </el-icon>
          <span>{{ opt.label }}</span>
        </template>
      </el-option>
    </el-select>

    <!-- 2. 预览已选图标 & 文本 -->
    <div
      v-if="showPreview && selectedOpt"
      class="preview"
      :style="{ marginTop: previewMarginTop + 'px' }"
    >
      <el-icon :size="previewSize" style="vertical-align: middle; margin-right: 8px">
        <component :is="selectedOpt.icon" />
      </el-icon>
      <span>{{ selectedOpt.label }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

/**
 * Props:
 * - modelValue：v-model 双向绑定，选中的 value（图标名称）
 * - options：可选，自定义 icon 列表；默认把 Element Plus 全部图标导入
 * - size：下拉列表中图标大小
 * - width：下拉框宽度
 * - placeholder：下拉框占位文本
 * - showPreview：是否在下拉框下方显示已选内容预览
 * - previewSize：预览区图标大小
 * - previewMarginTop：预览区与 select 之间的距离
 */
const props = defineProps({
  modelValue: { type: String, default: '' },
  options: {
    type: Array,
    default: () =>
      Object.entries(ElementPlusIconsVue).map(([key, comp]) => ({
        label: key,
        value: key,
        icon: comp
      }))
  },
  size: { type: Number, default: 20 },
  width: { type: [Number, String], default: 240 },
  placeholder: { type: String, default: '请选择图标' },
  showPreview: { type: Boolean, default: true },
  previewSize: { type: Number, default: 24 },
  previewMarginTop: { type: Number, default: 16 }
})

const emit = defineEmits(['update:modelValue'])

// 用于 el-select 的 v-model
const innerValue = computed({
  get: () => props.modelValue,
  set: v => emit('update:modelValue', v)
})

// 找到当前选中的 option 对象
const selectedOpt = computed(() => {
  return props.options.find(opt => opt.value === props.modelValue) || null
})
</script>

<style scoped>
.icon-picker {
  display: inline-block;
}
.preview {
  display: flex;
  align-items: center;
}
</style>
